<template>
	<view>
		<scroll-view scroll-y @scrolltolower="scrolltolower" v-if="list.length" :style="{'height':scrollHeight}"
			:scroll-top="scrollTop" @scroll="scroll">
			<uni-card v-for="(item,index) in list" :key="index" spacing="0 10px 0px 10px" @click="view(item)">
				<template v-slot:title>
					<view class="cardView" @click="view(item)">
						<view class="cardViewItem" style="align-items:baseline;">
							<view class="itemTitleLeft">{{index + 1}}.{{item.sname}}({{item.scode}})</view>
							</view>
							<view class="cardViewItem">
								<view>院校省份：{{item.provinceName || "" }}</view>
								<view class="itemTitleRight">
									{{item.submitRate ? item.submitRate + '%' : ""}}
								</view>
							</view>
							<view class="cardViewItem">
								<view>
		<!-- 							<view class="itemTag">
										<u-tag text="双一流" plain shape="circle" plainFill
											style="margin-right: 5px;" color="#333333"></u-tag>
										<u-tag text="211" plain shape="circle" plainFill
											style="margin-right: 5px;" color="#333333"></u-tag>
										<u-tag text="985" plain shape="circle" plainFill
											style="margin-right: 5px;" color="#333333"></u-tag>
										<u-tag text="公办" plain shape="circle" plainFill
											style="margin-right: 5px;" color="#333333"></u-tag>
									</view> -->
									<view class="itemTag">
										<u-tag :text="'专业组:' + item.zyz" shape="circle" style="margin-right: 5px;"></u-tag>
										<view style="margin-left: 5px;">再选科目：{{item.zxkm || "" }}</view>
									</view>
								</view>
		<!-- 						<view>
									<view class="itemTag">
										<view class="customRoundTag">
											<text class="firstChild">20个专业</text>
											<text class="secondChild">60人</text>
										</view>
									</view>
								</view> -->
							</view>
						</view>
				</template>
				<view>
					<u-row customStyle="margin-top: 10px" v-for="(item2,index2) in item.children" :key="index2">
						<u-col span="4">
							<view>{{item2.year}}最低分:{{item2.minGrade}}</view>
						</u-col>
						<u-col span="4">
							<view>{{item2.year}}分数线:{{item2.gradeLine}}</view>
						</u-col>
						<u-col span="4">
							<view>最低分名次:{{item2.minGradeSeq}}</view>
						</u-col>
					</u-row>
				</view>
			</uni-card>
			<uni-load-more :status="status" :contentText="contentText" v-if="list.length >= 1"/>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			},
			scrollHeight: {
				type: String,
				default () {
					return "100vh"
				}
			}
		},
		name: "cardView",
		data() {
			return {
				status: 'more',
				contentText: {
					contentdown: '下滑查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多数据'
				},
				oldScrollTop: 0,
				scrollTop: 0
			};
		},
		methods: {
			scroll(e) {
				this.oldScrollTop = e.detail.scrollTop
			},
			backToTop(e) {
				this.scrollTop = this.oldScrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				})
			},
			view(item) {
				this.$emit('view',item)
			},
			scrolltolower() {
				this.$emit('scrolltolower', 'scrolltolower')
			},
			reachBottomStart() {
				this.status = 'loading'
			},
			reachBottomStop() {
				this.status = 'more'
			},
			reachBottomNoMore() {
				this.status = 'noMore'
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/ .uni-card__content{
		padding: unset !important;
	}
	.cardView {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;

		.cardViewItem {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin-top: 10px;

			.itemTitleLeft {
				color: #417EEC;
				font-size: 24px;
				font-weight: 500;
			}

			.itemTitleRight {
				color: #449B30;
				font-size: 24px;
				font-weight: bold;
			}
		}

		.itemTag {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: left;
			width: 100%;
			margin-top: 10px;

			.customRoundTag {
				background-color: #C7F1C2;
				color: #449B30;
				padding: 6px 10px;
				border-radius: 14px;

				.firstChild {
					font-size: 16px;
					vertical-align: middle;
				}

				.secondChild {
					margin-left: 5px;
					font-size: 14px;
					vertical-align: middle;
				}
			}
		}
	}
</style>